<template>
    <div class="page info">
        <nav-bar title="信息补全" @click-left="back"></nav-bar>
        <div class="con" v-if="!finish">
            <div class="progress">
                <steps :active="nowStep" active-color="#3978f5">
                    <step>店铺信息</step>
                    <step>身份证</step>
                    <step>结算卡信息</step>
                </steps>
            </div>
            <div v-if="nowStep==0">
                <server-info ref="storeInfoRef"></server-info>
            </div>
            <div v-if="nowStep==1">
                <id-card ref="idCardInfoRef" showType="2"></id-card>
            </div>
            <div v-if="nowStep==2">
                <bank-card ref="bankCardInfoRef" :shareInfo="shareInfo"></bank-card>
            </div>
            <div class="box_con1">
                <van-button type="info" size="large" @click="nextStep">{{buttMsg}}</van-button>
            </div>
        </div>
        <div class="con" v-else>
            <CollectionRet @commit="$router.replace('/tabs')"></CollectionRet>
        </div>
        <PopCollection ref="popTips"></PopCollection>
    </div>
</template>

<script>

import { Step, Steps } from "vant";
import ServerInfo from "@/components/form/server-info.vue";
import IdCard from "@/components/form/id-card.vue";
import BankCard from "@/components/form/bank-card.vue";
import { Dialog } from "vant";
import PopCollection from "@/components/pop/pop-collection.vue";
import CollectionRet from "@/components/view/collection-ret"

export default {
    components: { ServerInfo, Step, Steps, IdCard, BankCard, PopCollection, CollectionRet },

    data() {
        return {
            nowStep: 0,
            shareInfo: {},
            finish: false
        };
    },

    mounted() {
        this.nowStep = 0;
        this.prepareData();
        this.$refs.popTips.show();
    },

    methods: {
        back() {
            Dialog.confirm({
                title: "提示",
                message: "内容还未保存，确定关闭吗？",
                confirmButtonText: "退出",
                cancelButtonText: "继续填写",
            }).then(() => {
                this.$router.replace("/tabs");
            })
        },

        // 初始化数据
        prepareData() {
            // TODO 判断当前用户状态区分是否有记录
        },

        nextStep() {
            if (this.nowStep == 0) {
                const params = this.$refs.storeInfoRef.submitForm();
                this.shareInfo.merchantProperty = params.agentProperty;
                this.$http.serverCollectionBase(params).then((respData) => {
                    if (respData === false) {
                        return false;
                    }
                    this.nowStep = 1;
                });
            } else if (this.nowStep == 1) {
                const params = this.$refs.idCardInfoRef.submitForm();
                this.$http.serverCollectionIdCard(params).then((respData) => {
                    if (respData === false) {
                        return false;
                    }
                    this.shareInfo.certificateName = params.legalPersonName;
                    this.nowStep = 2;
                });
            } else if (this.nowStep == 2) {
                // 完成
                let params = this.$refs.bankCardInfoRef.submitForm();
                this.$http.collectionSaveBankInfo(params).then((respData) => {
                    if (respData === false) {
                        return false;
                    }
                    return this.$http.serverCollectionSubmit();
                }).then(respData => {
                    if (respData === false) {
                        return false;
                    }
                    this.finish = true;
                });
            }
        },
    },

    computed: {
        buttMsg() {
            if (this.nowStep == 2) {
                return "完成";
            } else {
                return "下一步";
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.info {
    width: 100%;

    .progress {
        padding: 0 40px;
        background-color: #fff;
    }

    .box_con1 {
        padding: 20px 10px;
    }
}
</style>
